<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Open Social Templates</title>
	<script>
	
	function _IG_GetImage(url) {
		
		var img = document.createElement("img");
		//http://deploz.com/orkut/resources//btnInstaleTambem.gif
		img.src = url.substr(url.indexOf("resources"));
		return img;
	}
	
	function update() {
		var select = document.getElementById("templates");
		var surface = document.getElementById("surface");

		GLE__MODULE_ID__._surface = surface.value;
		
		var obj = document.getElementById("obj").value;
		var param = {};
		try {
			param = eval("param = " + obj);
		} catch( e ) {
			alert(e);
			return;
		}
		
		var f = select.value;
		if ( !f ) {
			return;
		}
		if ( typeof GLE__MODULE_ID__[f] == "function" ) {
			GLE__MODULE_ID__.setPage(GLE__MODULE_ID__[f](param), "__template");
		} else {
			alert(f + " don't exists.");
		}		
	}
	window.onload = function() {
		update();
	}
	</script>
	<style>
		#__template {border:1px solid #000;width:700px;}
		.__menu {background:#ccc;padding:10px;}
	</style>
	<style>@import "resources/default.css";
</style>
<script type="text/javascript">


var GLE__MODULE_ID__ = {


}

</script>
<script type="text/javascript">

// wrapper functions.
function _ctn(p){return document.createTextNode(p);}
function _cel(p){return document.createElement(p);}
//function $(i){ return document.getElementById(i);}

function _img(url) {
	var img = document.createElement("img");
	img.src = url;
	return img;
} 


/* Some utils functions */
String.prototype.truncate = function( length ) {
	if( this.length > length ) {
		return this.substr(0, length - 3) + "...";
	}
	return this;
}

//MELHORAR!!!
Function.prototype.bindAsEvent = function() {
    var method = this;
	var object = arguments[0];
	var params = [];
	for ( var i = 1; i < arguments.length; i++ ) {
		params.push(arguments[i]);
	} 
    return function() {method.apply(object, params);};
} 

		
	/*
	callback:function(fn, params) {
    	var method = this[fn];    	
		var object = this; 
		
		return function() {
			if(params){
				var args = new Array();
				for(i = 0; i< arguments.length; i++){
					args.push(arguments[i]);
				}
				for(i = 0; i< params.length; i++){
					args.push(params[i]);
				}		
				method.apply(object,  args);
			} else{
				method.apply(object,  arguments);
			}
		}
	}*/	

Function.prototype.bae = Function.prototype.bindAsEvent;


GLE__MODULE_ID__.setPage = function( page, elId ) {
    var el = document.getElementById((elId)?elId:'app__MODULE_ID__');
    if ( typeof page == "string" ) {
    	el.innerHTML = html;
	} else {
    	el.innerHTML = "";
    	el.appendChild( page );
	}
}


function addMethods(to,from)
{  
	for (var property in from)
	{
		to[property] = from[property];		
	}
};

</script>
<script type="text/javascript">
</script>

</head>
<body>
	<div class="__menu">
		<select id="templates"  onchange="update()">
			<option></option>
			
		</select>
		<select id="surface" onchange="update()">
			<option>canvas</option>
			<option>profile</option>
		</select>
		<input type="text" id="obj" value="{}" />
		<input type="button" value="update" onclick="update()" />
	</div>
	<br />
	<div id="__template">
	</div>
</body>
</html>
